<template>
  <KindSearch
    :option="option"
    :type="state.type"
    :area="state.area"
    :initial="state.initial"
    @toggle-click="toggleClick"
  />

  <div class="grid grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
    <div class="pb-5 px-2" v-for="item in state.list" :key="item.id" @click="toDesc(item)">
      <img class="rounded-full object-cover cursor-pointer w-full" :src="item.img1v1Url + '?param=120y120'" />
      <div class="mt-2 text-sm text-center">{{ item.name }}</div>
    </div>
  </div>

  <div v-if="state.hasMore" class="text-center">
    <el-button class="mx-auto" type="success" link @click="loadMore" v-loading="state.isLoading"> 加载更多 </el-button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import KindSearch from './component/KindSearch.vue'
import { getArtistList } from '@/api/song'
import type { TopArtist } from '@/types/song/index'
import type { Option, Type } from '@/types/common/common.ts'
import { useRouter } from 'vue-router'
const { push } = useRouter()

const option: Option[] = [
  {
    label: '语种',
    value: 'area',
    option: [
      { label: '全部', value: -1 },
      { label: '华语', value: 7 },
      { label: '欧美', value: 96 },
      { label: '日本', value: 8 },
      { label: '韩国', value: 16 },
      { label: '其他', value: 0 },
    ],
  },
  {
    label: '分类',
    value: 'type',
    option: [
      { label: '全部', value: -1 },
      { label: '男歌手', value: 1 },
      { label: '女歌手', value: 2 },
      { label: '乐队组合', value: 3 },
    ],
  },
  {
    label: '筛选',
    value: 'initial',
    option: [
      { label: '热门', value: '-1' },
      { label: 'A', value: 'a' },
      { label: 'B', value: 'b' },
      { label: 'C', value: 'c' },
      { label: 'D', value: 'd' },
      { label: 'E', value: 'e' },
      { label: 'F', value: 'f' },
      { label: 'G', value: 'g' },
      { label: 'H', value: 'h' },
      { label: 'I', value: 'i' },
      { label: 'J', value: 'j' },
      { label: 'K', value: 'k' },
      { label: 'L', value: 'l' },
      { label: 'M', value: 'm' },
      { label: 'N', value: 'n' },
      { label: 'O', value: 'o' },
      { label: 'P', value: 'p' },
      { label: 'Q', value: 'q' },
      { label: 'R', value: 'r' },
      { label: 'S', value: 's' },
      { label: 'T', value: 't' },
      { label: 'U', value: 'u' },
      { label: 'V', value: 'v' },
      { label: 'W', value: 'w' },
      { label: 'X', value: 'x' },
      { label: 'Y', value: 'y' },
      { label: 'Z', value: 'z' },
      { label: '#', value: '0' },
    ],
  },
]

const state = reactive({
  isLoading: false,
  offset: 1,
  limit: 30,
  initial: '-1',
  type: -1,
  area: -1,
  list: [] as Array<TopArtist>,
  hasMore: false,
})

const toggleClick = (value: Type, subValue: string | number) => {
  state.offset = 1
  state.list = []
  if (value === 'initial') {
    state[value] = subValue as string
  } else if (['area', 'type'].includes(value)) {
    state[value] = subValue as number
  }
  getData()
}

const getData = async () => {
  state.isLoading = true
  try {
    const { data } = await getArtistList({
      type: state.type,
      area: state.area,
      initial: state.initial,
      limit: state.limit,
      offset: (state.offset - 1) * state.limit,
    })
    if (data.code !== 200) throw new Error('获取失败')
    state.list = [...state.list, ...data.artists]
    state.hasMore = data.more
  } catch (error) {
    ElMessage.error((error as Error)?.message ?? '获取失败')
  } finally {
    state.isLoading = false
  }
}
getData()

const loadMore = () => {
  state.offset++
  getData()
}

const toDesc = (item: TopArtist) => {
  push({ name: 'artistInfo', query: { id: item.id } })
}
</script>

<style lang="less" scoped></style>
